
<!doctype html>
<html lang="en">
<head><meta name="generator" content="Hexo 3.9.0">
    <title>Badge 徽章 — Feui</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <link rel="icon" href="/docs/images/favicon.ico" type="image/x-icon">
    <!--[if lte IE 9]>
      <meta http-equiv="refresh" content="0;url=https://ifuyuan.wang/browser/">
    <![endif]-->
    <title>Feui</title>
    <link rel="stylesheet" href="/docs/./css/style.css">
    <script>window.PAGE_TYPE = "guide"</script>
</head>

<a href="https://github.com/zoeblow/feui" target="_blank" class="github-corner" aria-label="View source on Github"><svg width="60" height="60" viewbox="0 0 250 250" style="fill:#41b883; color:#fff; position: fixed; top: 0; border: 0; right: 0;z-index: 99;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"/><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"/><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"/></svg></a>
<div id="progress"></div>
<body class="docs">
    <div id="header">
  <a id="logo" href="/docs/">
    <img src="/docs/images/logo.png">
    <span>Feui</span>
  </a>
  <button id="mobile">
    <span class="btn-bar"></span>
    <span class="btn-bar"></span>
    <span class="btn-bar"></span>
  </button>  
  <ul id="nav">
    <li><a href="/docs/feui/guide/" class="nav-link current">教程</a></li>
<li><a href="https://feui.gitee.io">示例</a></li>
<li><a href="/docs/feui/guide/team.html" class="nav-link team">Team</a></li>
  </ul>
</div>
    
      <div id="main" class="fix-sidebar">
        <div class="main-content">
          
            <button id="mobile2">
  <span class="btn-bar"></span>
  <span class="btn-bar"></span>
  <span class="btn-bar"></span>
</button>  
<div id="mask"></div>

  <div class="sidebar" id="sidebar">
  <div class="sidebar-inner">
    <ul class="main-menu">
      <li><a href="/docs/feui/guide/" class="nav-link current">教程</a></li>
<li><a href="https://feui.gitee.io">示例</a></li>
<li><a href="/docs/feui/guide/team.html" class="nav-link team">Team</a></li>
    </ul>
    <div class="list">
      <ul class="menu-root">
  
    
    
      
        <li><a class="title-18">开发指南</a></li>
      
      
      
      
      
      
    
    
    <li>
      <a href="/docs/feui/guide/index.html" class="sidebar-link">Feui介绍</a>
    </li>
  
    
    
      
      
      
      
      
      
    
    
    <li>
      <a href="/docs/feui/guide/quickstart.html" class="sidebar-link">快速上手</a>
    </li>
  
    
    
      
      
      
      
      
      
    
    
    <li>
      <a href="/docs/feui/guide/readme.html" class="sidebar-link">开发指北</a>
    </li>
  
    
    
      
      
      
      
      
      
    
    
    <li>
      <a href="/docs/feui/guide/changelog.html" class="sidebar-link">更新日志</a>
    </li>
  
    
    
      
      
        <li><a class="title-18">组件系统</a></li>
      
      
      
      
      
    
    
    <li>
      <a href="/docs/feui/guide/component/component.html" class="sidebar-link">组件系统文档规则</a>
    </li>
  
    
    
      
      
      
      
      
      
    
    
    <li>
      <a href="/docs/feui/guide/component/forms.html" class="sidebar-link">文档格式</a>
    </li>
  
    
    
      
      
      
      
      
      
    
    
    <li>
      <a href="/docs/feui/guide/component/demo.html" class="sidebar-link">栗子 Demo</a>
    </li>
  
    
    
      
      
      
      
        <li><a class="title-16">基础组件</a></li>
      
      
      
    
    
    <li>
      <a href="/docs/feui/guide/component/badge.html" class="sidebar-link current">Badge 徽章</a>
    </li>
  
    
    
      
      
      
      
      
      
    
    
    <li>
      <a href="/docs/feui/guide/component/button.html" class="sidebar-link">Button 按钮</a>
    </li>
  
    
    
      
      
      
      
      
      
    
    
    <li>
      <a href="/docs/feui/guide/component/count.html" class="sidebar-link">Count 累加器</a>
    </li>
  
    
    
      
      
      
      
      
      
    
    
    <li>
      <a href="/docs/feui/guide/component/header.html" class="sidebar-link">Header 头部</a>
    </li>
  
    
    
      
      
      
      
      
      
    
    
    <li>
      <a href="/docs/feui/guide/component/icon.html" class="sidebar-link">Icons 图标</a>
    </li>
  
    
    
      
      
      
      
      
      
    
    
    <li>
      <a href="/docs/feui/guide/component/qrcode.html" class="sidebar-link">QRcode 二维码</a>
    </li>
  
    
    
      
      
      
      
      
      
    
    
    <li>
      <a href="/docs/feui/guide/component/range.html" class="sidebar-link">Range 滑块</a>
    </li>
  
    
    
      
      
      
      
      
      
    
    
    <li>
      <a href="/docs/feui/guide/component/rater.html" class="sidebar-link">Rater 评价</a>
    </li>
  
    
    
      
      
      
      
      
      
    
    
    <li>
      <a href="/docs/feui/guide/component/search.html" class="sidebar-link">Search 搜索框</a>
    </li>
  
    
    
      
      
      
      
      
      
    
    
    <li>
      <a href="/docs/feui/guide/component/steps.html" class="sidebar-link">Steps 步骤条</a>
    </li>
  
    
    
      
      
      
      
      
      
    
    
    <li>
      <a href="/docs/feui/guide/component/tab.html" class="sidebar-link">Tab 标签栏</a>
    </li>
  
    
    
      
      
      
      
      
      
    
    
    <li>
      <a href="/docs/feui/guide/component/tabber.html" class="sidebar-link">Tabbar 底部标签</a>
    </li>
  
    
    
      
      
      
      
      
        <li><a class="title-16">表单组件</a></li>
      
      
    
    
    <li>
      <a href="/docs/feui/guide/component/address.html" class="sidebar-link">Address 地址栏</a>
    </li>
  
    
    
      
      
      
      
      
      
    
    
    <li>
      <a href="/docs/feui/guide/component/cell.html" class="sidebar-link">Cell 单元格</a>
    </li>
  
    
    
      
      
      
      
      
      
    
    
    <li>
      <a href="/docs/feui/guide/component/checkicon.html" class="sidebar-link">Checkicon 单选按钮</a>
    </li>
  
    
    
      
      
      
      
      
      
    
    
    <li>
      <a href="/docs/feui/guide/component/checker.html" class="sidebar-link">Checker 选择按钮</a>
    </li>
  
    
    
      
      
      
      
      
      
    
    
    <li>
      <a href="/docs/feui/guide/component/checklist.html" class="sidebar-link">Checklist 按钮组</a>
    </li>
  
    
    
      
      
      
      
      
      
    
    
    <li>
      <a href="/docs/feui/guide/component/countup.html" class="sidebar-link">Countup 数字滚动</a>
    </li>
  
    
    
      
      
      
      
      
      
    
    
    <li>
      <a href="/docs/feui/guide/component/flexbox.html" class="sidebar-link">Flexbox 弹性布局</a>
    </li>
  
    
    
      
      
      
      
      
      
    
    
    <li>
      <a href="/docs/feui/guide/component/indexlist.html" class="sidebar-link">Indexlist 分类列表</a>
    </li>
  
    
    
      
      
      
      
      
      
    
    
    <li>
      <a href="/docs/feui/guide/component/inlinecalendar.html" class="sidebar-link">inlineCalendar 日历组件</a>
    </li>
  
    
    
      
      
      
      
      
      
    
    
    <li>
      <a href="/docs/feui/guide/component/input.html" class="sidebar-link">input 输入框</a>
    </li>
  
    
    
      
      
      
      
      
      
    
    
    <li>
      <a href="/docs/feui/guide/component/lazyload.html" class="sidebar-link">Lazyload 懒加载</a>
    </li>
  
    
    
      
      
      
      
      
      
    
    
    <li>
      <a href="/docs/feui/guide/component/noticebar.html" class="sidebar-link">Noticebar 通知栏</a>
    </li>
  
    
    
      
      
      
      
      
      
    
    
    <li>
      <a href="/docs/feui/guide/component/pullrefresh.html" class="sidebar-link">Pullrefresh 刷新加载</a>
    </li>
  
    
    
      
      
      
      
      
      
    
    
    <li>
      <a href="/docs/feui/guide/component/radio.html" class="sidebar-link">Radio 单选按钮</a>
    </li>
  
    
    
      
      
      
      
      
      
    
    
    <li>
      <a href="/docs/feui/guide/component/switch.html" class="sidebar-link">Switch 开关</a>
    </li>
  
    
    
      
      
      
      
      
      
    
    
    <li>
      <a href="/docs/feui/guide/component/textarea.html" class="sidebar-link">Textarea 文本域</a>
    </li>
  
    
    
      
      
      
      
      
      
    
    
    <li>
      <a href="/docs/feui/guide/component/keyboard.html" class="sidebar-link">Keyboard 键盘</a>
    </li>
  
    
    
      
      
      
      
      
      
    
    
    <li>
      <a href="/docs/feui/guide/component/pwdinput.html" class="sidebar-link">Pwdinput 密码输入框</a>
    </li>
  
    
    
      
      
      
      
      
      
        <li><a class="title-16">反馈组件</a></li>
      
    
    
    <li>
      <a href="/docs/feui/guide/component/actionsheet.html" class="sidebar-link">Actionsheet 地址栏</a>
    </li>
  
    
    
      
      
      
      
      
      
    
    
    <li>
      <a href="/docs/feui/guide/component/datetime.html" class="sidebar-link new">Datetime 日期</a>
    </li>
  
    
    
      
      
      
      
      
      
    
    
    <li>
      <a href="/docs/feui/guide/component/dialog.html" class="sidebar-link">Dialog 弹窗</a>
    </li>
  
    
    
      
      
      
      
      
      
    
    
    <li>
      <a href="/docs/feui/guide/component/loading.html" class="sidebar-link">Loading 加载中</a>
    </li>
  
    
    
      
      
      
      
      
      
    
    
    <li>
      <a href="/docs/feui/guide/component/picker.html" class="sidebar-link">Picker 选择</a>
    </li>
  
    
    
      
      
      
      
      
      
    
    
    <li>
      <a href="/docs/feui/guide/component/popup.html" class="sidebar-link">Popup 弹出</a>
    </li>
  
    
    
      
      
      
      
      
      
    
    
    <li>
      <a href="/docs/feui/guide/component/popuppicker.html" class="sidebar-link">PopupPicker 弹出选择</a>
    </li>
  
    
    
      
      
      
      
      
      
    
    
    <li>
      <a href="/docs/feui/guide/component/scroll.html" class="sidebar-link">Scroll 滑动加载</a>
    </li>
  
    
    
      
      
      
      
      
      
    
    
    <li>
      <a href="/docs/feui/guide/component/slidbtn.html" class="sidebar-link">Slidbtn 滑动操作</a>
    </li>
  
    
    
      
      
      
      
      
      
    
    
    <li>
      <a href="/docs/feui/guide/component/swiper.html" class="sidebar-link">Swiper 滑动操作</a>
    </li>
  
    
    
      
      
      
      
      
      
    
    
    <li>
      <a href="/docs/feui/guide/component/toast.html" class="sidebar-link">Toast 提示</a>
    </li>
  
    
    
      
      
      
      
      
      
    
    
    <li>
      <a href="/docs/feui/guide/component/uploader.html" class="sidebar-link">Uploader 上传</a>
    </li>
  
    
    
      
      
      
      
      
      
    
    
    <li>
      <a href="/docs/feui/guide/component/imgpreview.html" class="sidebar-link">ImgPreview 图片预览</a>
    </li>
  
    
    
      
      
      
        <li><a class="title-18">Team</a></li>
      
      
      
      
    
    
    <li>
      <a href="/docs/feui/guide/team.html" class="sidebar-link">Team</a>
    </li>
  
</ul>

    </div>
  </div>
</div>



<div id="content" class="content guide with-sidebar badge-guide">
  <div class="content_box">
    
      <h1>Badge 徽章</h1>
    
    <div id="pContent">
      <p><a href="https://feui.gitee.io/#/badge">Live Demo&gt;&gt;</a></p>
<h3 id="使用指南"><a href="#使用指南" class="headerlink" title="使用指南"></a>使用指南</h3><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; Badge &#125; <span class="keyword">from</span> <span class="string">'feui'</span>;</span><br><span class="line"></span><br><span class="line">components: &#123;</span><br><span class="line">  [Badge.name]: Badge</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h3 id="代码演示"><a href="#代码演示" class="headerlink" title="代码演示"></a>代码演示</h3><h4 id="基础用法"><a href="#基础用法" class="headerlink" title="基础用法"></a>基础用法</h4><figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">fe-badge</span> <span class="attr">text</span>=<span class="string">"1"</span>&gt;</span><span class="tag">&lt;/<span class="name">fe-badge</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h4 id="与其他组件同用"><a href="#与其他组件同用" class="headerlink" title="与其他组件同用"></a>与其他组件同用</h4><figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">fe-group</span> <span class="attr">title</span>=<span class="string">'表格中使用'</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">fe-cell</span> <span class="attr">title</span>=<span class="string">"个位数"</span> <span class="attr">is-link</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"badge-value"</span> <span class="attr">slot</span>=<span class="string">"value"</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">"vertical-middle"</span>&gt;</span>未读消息 &amp;nbsp;<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">fe-badge</span> <span class="attr">text</span>=<span class="string">"8"</span>&gt;</span><span class="tag">&lt;/<span class="name">fe-badge</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">fe-cell</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">fe-cell</span> <span class="attr">title</span>=<span class="string">"较大数据"</span> <span class="attr">is-link</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"badge-value"</span> <span class="attr">slot</span>=<span class="string">"value"</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">"vertical-middle"</span>&gt;</span>新信息 &amp;nbsp;<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">fe-badge</span> <span class="attr">text</span>=<span class="string">"888"</span>&gt;</span><span class="tag">&lt;/<span class="name">fe-badge</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">fe-cell</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">fe-group</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h3 id="API"><a href="#API" class="headerlink" title="API"></a>API</h3><table>
<thead>
<tr>
<th>参数</th>
<th>说明</th>
<th>类型</th>
<th>默认值</th>
<th>可选值</th>
</tr>
</thead>
<tbody>
<tr>
<td>text</td>
<td>显示的文字</td>
<td><code>String</code></td>
<td>-</td>
<td>-</td>
</tr>
<tr>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
</tr>
</tbody>
</table>

    </div>
    
      <div class="guide-links">
        
        
          <span style="float: right;"><a href="/docs/feui/guide/component/button.html">Button 按钮</a> →</span>
        
      </div>
    
    <div class="footer">
      文档出现错误或者想参与贡献?
      <a href="https://gitee.com/feui/feui-hexo/blob/master/source/feui/guide/component/badge.md" target="_blank">
        在Github编辑此页面!
      </a>
    </div>
  </div>
</div>

          
        </div>
      </div>
      <script src="/docs/./js/smooth-scroll.min.js"></script>
    
    <script src="/docs/./js/css.escape.js"></script>
    <script src="/docs/./js/common.js"></script>
    <script src="/docs/./js/index.js"></script>
</body>
</html>